<style>
    .lay-dialog-title{
        padding: 0 20px;
        position: relative;
        z-index: 99;
        border-bottom: 1px solid #e5e5e5;
        line-height: 39px;
        height: 39px;
        overflow: hidden;
        color: #666;
    }
    .lay-dialog-title label{color: #999}
    .samplingAmount{
        height: 28px !important;
    }
</style>


<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">车间：</label>
                                    <div class="layui-input-inline">
                                        <select name="workshopName">
                                            <option value="">车间</option>
                                            <option value="settled">一号车间</option>
                                            <option value="selfEmployed">二号车间</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">柜子：</label>
                                    <div class="layui-input-inline">
                                        <select name="typeOfEnterprise">
                                            <option value="">柜子</option>
                                            <option value="settled">A001-YD001-A1-20020501-001</option>
                                            <option value="selfEmployed">A001-YD001-A1-20020501-002</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">品牌：</label>
                                    <div class="layui-input-inline">
                                        <select name="typeOfEnterprise">
                                            <option value="">品牌</option>
                                            <option value="settled">弗兰第</option>
                                            <option value="selfEmployed">云端</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">订单状态：</label>
                                    <div class="layui-input-inline">
                                        <select name="status" lay-filter="status">
                                            <option value="">订单状态</option>
                                            <option value="pending">待处理</option>
                                            <option value="confirmed">已确认</option>
                                            <option value="replenishment">补货中</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">商品编码：</label>
                                    <div class="layui-input-inline">
                                        <input name="skuCode"  class="layui-input" type="text" placeholder="请输入商品编号"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">货道编号：</label>
                                    <div class="layui-input-inline">
                                        <input name="cabCode"  class="layui-input" type="text" placeholder="请输入货道编号"/>
                                    </div>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog" lay-submit>查询</button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 表格 -->
            <table class="layui-table" id="inventoryAlarmDetailTable" lay-filter="inventoryAlarmDetailTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列-->
<script type="text/html" id="inventoryAlarmTableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="dtl">详情</a>
    {{# if(d.status!="confirmed"){ }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="affirm">确认</a>
    {{# } }}
</script>

<!-- 详情 表格操作列-->
<script type="text/html" id="alarmDetailTableBar">
    <!--
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="alarmDetailAffirm">确认</a>
    -->
    <button class="layui-btn saveBtn" lay-filter="confirmFormSubmit" lay-submit>确认</button>
</script>

<!-- 详情 表格操作列-->
<script type="text/html" id="inventoryAlarmDetailTableBar2">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="alarmDetail" style="background-color: #009688;color: #fff">详情</a>
</script>

<!-- 表单详情弹窗 -->
<script type="text/html" id="distributionDemandPlanDetail">
    <div class="lay-dialog-title">
        <span class="layui-breadcrumb" style="visibility: visible">
            <a href="#">首页</a>
            <span lay-separator>/</span>
            <a href="#">柜子</a>
            <span lay-separator>/</span>
           <span id="alarmTitle"></span>
        </span>
    </div>
    <form lay-filter="distributionDemandPlanDetail" class="layui-form model-form">
<!--        <div class="layui-card-body" style="padding: 0 20px;width: 1300px" >-->
            <!-- 表格 -->
            <table class="layui-table" id="orderDetailTable" lay-filter="orderDetailTable"></table>
<!--        </div>-->
<!--        <div class="layui-card-body" style="padding: 30px 20px 50px;width: 1300px">-->
            <!-- 表格 -->
            <table class="layui-table" id="childOrdersTable" lay-filter="childOrdersTable"></table>
<!--        </div>-->
    </form>
</script>

<!-- 表单详情弹窗 -->
<script type="text/html" id="alarmDetailFrom" lay-filter="alarmDetailFrom">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;"><span class="text-red">*</span>物料编号</label>
            <div class="layui-form-mid layui-word-aux">
               <span style="color: red" id="skuCode" name="skuCode">  </span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;"><span class="text-red">*</span>物料规格编号</label>
            <div class="layui-form-mid layui-word-aux">
                <span style="color: red" id="specCode"> </span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;"><span class="text-red">*</span>品牌</label>
            <div class="layui-form-mid layui-word-aux">
                <span style="color: red"  id="brandName"> </span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;"><span class="text-red">*</span>所属分类</label>
            <div class="layui-form-mid layui-word-aux">
                <span style="color: red" id="theCategory"> </span>
            </div>
        </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px;"><span class="text-red">*</span>物料类型</label>
                <div class="layui-form-mid layui-word-aux">
                <span style="color: red" id="productType">  </span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px;"><span class="text-red">*</span>单价</label>
                <div class="layui-form-mid layui-word-aux">
                <span style="color: red" id="price"> </span>
                </div>
            </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;"><span class="text-red">*</span>单位</label>
            <div class="layui-form-mid layui-word-aux">
                <span style="color: red" id="detailUnit"> </span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;"><span class="text-red">*</span>描述</label>
            <div class="layui-form-mid layui-word-aux">
                <span style="color: red" id="remark"> </span>
            </div>
        </div>
        <!--<div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>-->
    </form>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="inventoryAlarmDetailForm">
    <form lay-filter="inventoryAlarmDetailForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">创建者</label>
            <div class="layui-input-block">
                <input name="creator" placeholder="请输入创建者" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">修改者</label>
            <div class="layui-input-block">
                <input name="modifier" placeholder="请输入修改者" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">创建人</label>
            <div class="layui-input-block">
                <input name="creatorName" placeholder="请输入创建人" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">修改人</label>
            <div class="layui-input-block">
                <input name="modifierName" placeholder="请输入修改人" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">告警id</label>
            <div class="layui-input-block">
                <input name="alarmId" placeholder="请输入告警id" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">柜子编号</label>
            <div class="layui-input-block">
                <input name="cabCode" placeholder="请输入柜子编号" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">柜子编号</label>
            <div class="layui-input-block">
                <input name="cabId" placeholder="请输入柜子编号" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">物料 id</label>
            <div class="layui-input-block">
                <input name="skuId" placeholder="请输入物料 id" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">物料编号</label>
            <div class="layui-input-block">
                <input name="skuCode" placeholder="请输入物料编号" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">物料规格ID</label>
            <div class="layui-input-block">
                <input name="specId" placeholder="请输入物料规格ID" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">物料规格ID</label>
            <div class="layui-input-block">
                <input name="specCode" placeholder="请输入物料规格ID" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">当前库存数量</label>
            <div class="layui-input-block">
                <input name="quantity" placeholder="请输入当前库存数量" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">最大补货数量</label>
            <div class="layui-input-block">
                <input name="quantityMax" placeholder="请输入最大补货数量" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="inventoryAlarmDetailFormSubmit" lay-submit>保存</button>
        </div>
    </form>

</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;

        // 渲染表格
        var insTb = table.render({
            elem: '#inventoryAlarmDetailTable',
            url: config.base + 'enterprisecab/order/admin/inventoryAlarm/list',
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'checkbox'}
                // ,{field: 'id', sort: true, title: 'ID'}
                ,{type: 'numbers', title: '序号'}
                ,{field: 'alarmCode', sort: true, title: '告警编号'}
                ,{field: 'cabCode', sort: true, title: '柜子编号'}
                ,{field: 'workshopName', sort: true, title: '车间'}
                ,{field: 'productName', sort: true, title: '物料名称'}
                ,{field: 'skuCode', sort: true, title: '物料编号'}
                ,{field: 'brandName', sort: true, title: '品牌'}  //需要带出
                ,{field: 'curentStock', sort: true, title: '当前库存'}
                ,{field: 'planReplenishment', sort: true, title: '建议补货'}
                ,{field: 'statusDesc', sort: true, title: '状态'}
                ,{field: 'createTime', sort: true, title: '记录时间'}
                ,{align: 'center', toolbar: '#inventoryAlarmTableBar', title: '操作', width: 150}
            ]],
            done: function (res, curr, count) {
                //移除按钮
            }
        });
        //头部  下拉框 渲染工具
        form.render('select');
        // 工具条点击事件
        table.on('tool(inventoryAlarmDetailTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'dtl') { //显示详情
                showDetailModel(data,0);
            } else if (obj.event === 'affirm') { //点击确认
                showDetailModel(data,1);
            }
        });

        //监听排序
        table.on('sort(inventoryAlarmDetailTable)', function(obj){
            table.reload('inventoryAlarmDetailTable', {
                initSort: obj
                ,where: {
                    sort: obj.field
                    ,order: obj.type
                }
            });
        });

        // 搜索
        form.on('submit(formSubSearchLog)', function (data) {
            insTb.reload({where: data.field,page: {curr: 1}},'data');
        });

        // 添加按钮点击事件
        $('#inventoryAlarmDetailBtnAdd').click(function () {
            showEditModel();
        });


        // 显示编辑弹窗
        function showEditModel(data) {
            admin.open({
                type: 1,
                area: '760px',
                offset: '65px',
                title: data ? '修改售刀柜物料货道库存告警明细' : '添加售刀柜物料货道库存告警明细',
                content: $('#inventoryAlarmDetailForm').html(),
                success: function () {
                    form.val('inventoryAlarmDetailForm', data);
                    // 表单提交事件
                    form.on('submit(inventoryAlarmDetailFormSubmit)', function (d) {
                        layer.load(2);
                        admin.req(data ? 'enterprisecab/order/admin/inventoryAlarm/update' : 'enterprisecab/order/admin/inventoryAlarm/add', d.field, function (res) {
                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.msg(res.msg, {icon: 1});
                                table.reload('inventoryAlarmDetailTable');
                                layer.closeAll('page');
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, data ? 'PUT' : 'POST');
                        return false;
                    });
                }
            });
        }

        // 删除
        function doDelete(obj) {
            layer.confirm('确定要删除吗？', {
                offset: '65px',
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                admin.req('enterprisecab/order/admin/inventoryAlarm/' + obj.data.id, {}, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        obj.del();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'DELETE');
            });
        }

        // 导出excel
        $('#inventoryAlarmDetailBtnExport').click(function () {
            var checkRows = table.checkStatus('inventoryAlarmDetailTable');
            if (checkRows.data.length == 0) {
                layer.msg('请选择要导出的数据', {icon: 2});
            } else {
                table.exportFile(insTb.config.id, checkRows.data, 'xls');
            }
        });


        var alarmList = [];//告警数据
        // 显示详情弹窗
        function showDetailModel(data,type) {
            console.log(type)
            admin.open({
                type: 1,
                area:  ['1700px','800px'],
                offset: '65px',
                title: type == 0 ? '查看告警详情' : '确认告警详情',
                content: $('#distributionDemandPlanDetail').html(),
                success: function () {
                    $("#alarmTitle").html(type == 0 ? '刀柜售刀柜库存告警信息详情' : '刀柜售刀柜库存告警确认补货信息');
                    alarmList = [];
                    admin.reqSync('enterprisecab/order/admin/inventoryAlarm/getInventoryAlarmById', {id: data.id}, function (res) {
                        if (res.code == 200) {
                            if(Object.keys(res.data).length > 0){
                                alarmList.push(res.data)
                            }
                            console.log(alarmList)
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }, 'GET');
                    var insTb3 = table.render({
                        elem: '#orderDetailTable',
                        data: alarmList,
                        // cellMinWidth: 100,
                        cols: [[
                            {field: 'id', title: 'ID', width: 60}
                            ,{field: 'alarmCode', sort: true, title: '告警编号', width: 120}
                            ,{field: 'cabCode', sort: true, title: '柜子编号', width: 150}
                            ,{field: 'workshopName', sort: true, title: '车间'}
                            ,{field: 'productName', sort: true, title: '物料名称'}
                            ,{field: 'skuCode', sort: true, title: '物料编号'}
                            ,{field: 'brandName', sort: true, title: '品牌'}  //需要带出
                            ,{field: 'detailUnit', sort: true, title: '单位'}
                            ,{field: 'curentStock', sort: true, title: '当前库存'}
                            ,{field: 'alarmStock', sort: true, title: '告警库存'}
                            ,{field: 'proposalStock', sort: true, title: '建议补货',hide : type == 0 ? false : true}
                            // ,{field: 'proposalStock', sort: true, title: '计划补货',hide : type == 0 ? true : false,edit:'text'}
                            ,{field: 'planReplenishment', sort: true, title: '计划补货',templet:function (d) {
                                    if(type==0){
                                        return d.planReplenishment;
                                    }
                                    if(d.planReplenishment){
                                        return '<div><input id="quantityConfirm" type="text" value="'+d.planReplenishment+'" class="layui-input quantity" lay-verify="number"/></div>';
                                    }else{
                                        return '<div><input id="quantityConfirm" type="text" value="" class="layui-input quantity" lay-verify="number" value=""/></div>';
                                    }

                                }}
                            ,{field: 'statusDesc', sort: true, title: '状态',hide : type == 0 ? false : true}
                            ,{field: 'createTime', sort: true, title: '记录时间', width: 180}
                            ,{align: 'center', toolbar: '#alarmDetailTableBar', title: '确认', width: 100,hide : type == 0 ? true : false}//,hide : type == 0 ? true : false
                        ]]
                    });
                    var insTb4 = table.render({
                        elem: '#childOrdersTable',
                        url: config.base + 'enterprisecab/order/admin/inventoryAlarmDetail/alarmDetailPageList?alarmId=' + data.id,
                        page: true,
                        // cellMinWidth: 100,
                        cols: [[
                            {field: 'id', sort: true, title: 'ID'},
                            {align: 'center', title: '序号', width: 60, type: 'numbers'}
                            ,{field: 'spaceCode', sort: true, title: '所属货道'}
                            ,{field: 'alarmCode', sort: true, title: '告警编号', width: 200}
                            ,{field: 'workshopName', sort: true, title: '车间'}
                            ,{field: 'productName', sort: true, title: '物料名称', width: 150}
                            ,{field: 'skuCode', sort: true, title: '物料编号', width: 150}
                            ,{field: 'brandName', sort: true, title: '品牌'}  //需要带出
                            ,{field: 'curentStock', sort: true, title: '当前库存'}
                            ,{field: 'planReplenishment', sort: true, title: '建议补货'}
                            ,{field: 'statusDesc', sort: true, title: '状态'}
                            ,{field: 'createTime', sort: true, title: '记录时间', width: 200}
                            ,{align: 'center', toolbar: '#inventoryAlarmDetailTableBar2', title: '详情', width: 100,hide : type == 0 ? false : true}
                        ]]
                    });

                    form.on('submit(confirmFormSubmit)', function (d) {
                        layer.load(2);
                        var quantityConfirm=$("#quantityConfirm").val();
                        admin.req('enterprisecab/order/admin/inventoryAlarm/addDistributionDemandPlan', {id:data.id,planReplenishment:quantityConfirm}, function (res) {
                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.msg(res.msg, {icon: 1});
                                table.reload('inventoryAlarmDetailTable');
                                layer.closeAll('page');
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'POST');
                        return false;
                    });
                }
            });
        }

        // 详情表格点击详情事件
        table.on('tool(childOrdersTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'alarmDetail') { //显示详情
                showDetailFromModel(data);
            }
        });
        //编辑计划补货
        table.on('edit(orderDetailTable)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            /*            console.log(obj.value); //得到修改后的值
                        console.log(obj.field); //当前编辑的字段名
                        console.log(obj.data.id); //所在行的所有相关数据*/
            const row = alarmList.find(x => x.id === obj.data.id);
            if(row){
                obj.data.proposalStock = obj.value;
                console.log(obj.data); //所在行的所有相关数据
            }
            table.reload('orderDetailTable', {
                elem: '#orderDetailTable'
                ,data: alarmList
            });
        })
        // 详情表格页面的确认事件
        table.on('tool(orderDetailTable)', function (obj) {
            var data = obj.data;

            if (obj.event === 'alarmDetailAffirm') { //点击确认
                data.alarmId = data.id;
                data.status = 1;
                delete data.id;
                console.log(data); //所在行的所有相关数据

                admin.req('enterprisecab/order/admin/inventoryAlarm/addDistributionDemandPlan', data, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        table.reload('inventoryAlarmDetailTable');
                        layer.closeAll('page');
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                },'POST');

            }
        });
        //详情表格里面的详情弹窗
        function showDetailFromModel(data) {
            admin.open({
                type: 1,
                area:  ['1000px','600px'],
                offset: '65px',
                title: '查看物料信息',
                content: $('#alarmDetailFrom').html(),
                success: function () {
                    admin.req('enterprisecab/order/admin/inventoryAlarmDetail/getInventoryAlarmDetailById', {id: data.id}, function (res) {
                        if (res.code == 200) {
                            console.log(res.data);
                            //给表单赋值
                            $("#skuCode").html(res.data.skuCode);
                            $("#specCode").html(res.data.skuSpecName);
                            $("#brandName").html(res.data.brandName);
                            $("#theCategory").html(res.data.theCategory);
                            $("#productType").html(res.data.productType);
                            $("#detailUnit").html(res.data.detailUnit);
                            $("#remark").html(res.data.remark);
                            $("#price").html(res.data.price);

                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }, 'GET');
                }
            });
        }

    });
</script>